<template>
  <div class="irrigationProgress">
    <TitleColumn name="灌溉进度" />
    <div class="content">
      <h3 class="total">
        <p>总灌溉计划量</p>
        <section>
          <span>4</span>
          <span>8</span>
          <span>3</span>
          <span>9</span>
          <span>.</span>
          <span>7</span>
          <span>8</span>
        </section>
        <p>m³</p>
      </h3>
      <vue3ScrollSeamless class="tableScrollWrap" :classOptions="{ step: 0.3 }" :dataList="state.list">
        <ul class="list">
          <li class="listItem" v-for="(item, index) in state.list" :key="index">
            <section>
              <h3>{{ item.name }}</h3>
              <div class="ratio">
                <p>面积占比：{{ item.ratio }}万亩</p>
              </div>
            </section>
            <Percentage :num="item.num" />
          </li>
        </ul>
      </vue3ScrollSeamless>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import TitleColumn from '@/components/TitleColumn';
  import { vue3ScrollSeamless } from "vue3-scroll-seamless";
  import Percentage from './Percentage.vue';

  defineOptions({ name: 'IrrigationProgress' });

  const state = reactive({
    list: [
      {name: '陈林种植大户', num: 30, ratio: '14.69'},
      {name: '杨定伍种植大户', num: 50, ratio: '34.11'},
      {name: '徐志国种植大户', num: 30, ratio: '34.45'},
      {name: '鲍桂林种植大户', num: 46, ratio: '14.69'},
      {name: '朱存喜种植大户', num: 30, ratio: '15.89'},
      {name: '翟跃进种植大户', num: 87, ratio: '14.69'},
      {name: '张义俭种植大户', num: 30, ratio: '14.69'},
      {name: '朱太兵种植大户', num: 32, ratio: '14.69'},
      {name: '杨定松种植大户', num: 48, ratio: '54.67'},
      {name: '夏兆壮种植大户', num: 33, ratio: '23.65'},
      {name: '彭延兵种植大户', num: 30, ratio: '14.69'},
      {name: '陈传金种植大户', num: 66, ratio: '14.69'},
    ],
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .irrigationProgress {
    width: 100%;
    height: 100%;
    .content {
      width: 100%;
      height: calc(100% - 24px);
      background: #02123433;
      backdrop-filter: blur(10px);
      position: relative;
      padding: 10px;
      h3.total {
        width: 100%;
        height: 42px;
        padding: 0 40px;
        background: url(./images/bg.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-bottom: 14px;
        section {
          display: flex;
          align-items: center;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            width: 24px;
            height: 24px;
            background: url(./images/num.png) no-repeat;
            background-size: 100% 100%;
            margin-right: 4px;
          }
        }
      }
      .tableScrollWrap {
        width: 100%;
        height: calc(100% - 60px);
        min-height: 160px !important;
        overflow: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
      }
      ul.list {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        li.listItem {
          width: 490pxpx;
          height: 60px;
          padding: 6px 10px 6px 10px;
          background: linear-gradient(360deg, rgba(6, 183, 253, 0.15) 0%, rgba(6, 183, 253, 0) 100%);
          border-bottom: 1px solid rgba(6, 183, 253, 0.2);
          section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            h3 {
              color: #fff;
              font-size: 17px;
              font-family: Title;
              line-height: 22px;
              font-weight: normal;
              margin-bottom: 8px;
            }
            .ratio {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              p {
                color: rgba(180, 223, 255, 1);
                font-size: 14px;
                margin-left: 10px;
                display: flex;
                align-items: center;
                &::before {
                  content: '';
                  display: inline-block;
                  width: 14px;
                  height: 14px;
                  border-radius: 2px;
                  box-shadow: 0px 0px 12px 0px #06B7FD inset;
                  margin-right: 6px;
                }
              }
              p:nth-child(2) {
                color: #B4DFFF;
                font-size: 14px;
                margin-left: 10px;
                display: flex;
                align-items: center;
                &::before {
                  content: '';
                  display: inline-block;
                  width: 14px;
                  height: 14px;
                  border-radius: 2px;
                  box-shadow: 0px 0px 12px 0px #23DF7B inset;
                  margin-right: 6px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
